<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>体检客户查询</title>
  <script src="https://unpkg.com/vue@3"></script>
  <script src="https://unpkg.com/element-plus"></script>
  <script src="https://unpkg.com/@element-plus/icons-vue"></script>
  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
  <style>
    body { margin: 0; padding: 0; background: #f4f6fa; font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif; }
    #app { padding: 20px; background: #f4f6fa; min-height: 100vh; }
    .cell-item { display: flex; align-items: center; }
    .myinput { width: 300px; height: 22px; margin-right: 20px; }
  </style>
</head>
<body>
  <div id="app">
    <div class="customer-query-container">
      <!-- 面包屑 -->
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>体检信息录入</el-breadcrumb-item>
      </el-breadcrumb>

      <!-- 根据编号查询患者 -->
      <div style="margin-top: 20px;">
        <el-descriptions class="margin-top" title="体检信息查询" :column="3" size="default" border>
          <template #extra>
            <el-button type="primary" @click="handleSearch">查询</el-button>
          </template>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">订单编号</div>
            </template>
            <el-input v-model="searchForm.id" placeholder="输入体检编号" />
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 患者基础信息 -->
      <div style="margin-top: 20px;">
        <el-descriptions class="margin-top" title="客户基本信息" :column="3" size="default" border>
          <el-descriptions-item>
            <template #label><div class="cell-item">订单编号</div></template>
            {{ customerInfo.orderId }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label><div class="cell-item">手机号码</div></template>
            {{ customerInfo.phone }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label><div class="cell-item">姓名</div></template>
            {{ customerInfo.name }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label><div class="cell-item">性别</div></template>
            {{ customerInfo.gender }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label><div class="cell-item">套餐类型</div></template>
            {{ customerInfo.packageType }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label><div class="cell-item">体检日期</div></template>
            {{ customerInfo.examDate }}
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 套餐检查 -->
      <div class="demo-collapse" style="margin-top: 20px;">
        <h4>检查录入</h4>
        <el-collapse v-model="activeNames" @change="handleChange">
          <!-- 一般检查基础项目 -->
          <el-collapse-item title="一般检查基础项目" name="1" style="font-weight: bold;">
            <div>
              <el-descriptions class="margin-top" :column="2" size="default" border>
                <el-descriptions-item label="身高">
                  <input class="myinput" type="text" v-model="examForm.height" placeholder="请输入身高" />cm
                  <el-tag size="small" style="margin-left: 20px;">正常值范围：-</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="体重">
                  <input class="myinput" type="text" v-model="examForm.weight" placeholder="请输入体重" />kg
                  <el-tag size="small" style="margin-left: 20px;">正常值范围：-</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="体重指数">
                  <el-text class="mx-1" type="warning">22.9</el-text>
                  <el-tag size="small" style="margin-left: 20px;">正常值范围：-</el-tag>
                  <el-button type="danger" size="small" style="margin-left: 20px;">异</el-button>
                </el-descriptions-item>
                <el-descriptions-item label="脉搏">
                  <input class="myinput" type="text" v-model="examForm.pulse" placeholder="请输入脉搏" />次/分钟
                  <el-tag size="small" style="margin-left: 20px;">正常值范围：-</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="收缩压" label-visible="false">
                  <input class="myinput" type="text" v-model="examForm.systolicPressure" placeholder="请输入收缩压" />
                  <el-tag size="small">正常值范围：-</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="舒张压">
                  <input class="myinput" type="text" v-model="examForm.diastolicPressure" placeholder="请输入舒张压" />
                  <el-tag size="small" style="margin-left: 20px;">正常值范围：-</el-tag>
                </el-descriptions-item>
              </el-descriptions>
              <!-- 科室小结 -->
              <div style="margin-top: 20px;">
                <font>科室小结</font>
                <el-descriptions class="margin-top" :column="1" size="default" border style="margin-top: 20px;">
                  <el-descriptions-item label="科室小结">
                    <el-input v-model="examForm.departmentSummary" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" placeholder="科室小结：超重" />
                  </el-descriptions-item>
                </el-descriptions>
              </div>
              <!-- 责任医生 -->
              <div style="margin-top: 20px;">
                <font>责任医生</font>
                <el-descriptions class="margin-top" :column="3" size="default" border style="margin-top: 20px;">
                  <el-descriptions-item label="录入医师">
                    <input class="myinput" type="text" v-model="examForm.inputDoctor" placeholder="请输入录入医师姓名" />
                  </el-descriptions-item>
                  <el-descriptions-item label="责任医师">
                    <input class="myinput" type="text" v-model="examForm.responsibleDoctor" placeholder="请输入责任医师姓名" />
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <el-button type="primary" @click="onSubmitBasicExam">一般检查基础项数据保存</el-button>
                  </el-descriptions-item>
                </el-descriptions>
              </div>
            </div>
          </el-collapse-item>

          <!-- 视力+辨色力 -->
          <el-collapse-item title="视力+辨色力" name="2">
            <div>
              <el-descriptions class="margin-top" :column="2" size="default" border>
                <el-descriptions-item label="色觉检查">
                  <el-select v-model="examForm.colorVision" class="m-2" placeholder="输入正确数据">
                    <el-option v-for="item in colorVisionOptions" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                </el-descriptions-item>
                <el-descriptions-item></el-descriptions-item>
                <el-descriptions-item label="右眼裸眼视力">
                  <input class="myinput" type="text" v-model="examForm.rightEyeNakedVision" placeholder="请输入右眼裸视力" />
                  <el-tag size="small" style="margin-left: 20px;">正常值范围：5.0-5.2</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="左眼裸眼视力">
                  <input class="myinput" type="text" v-model="examForm.leftEyeNakedVision" placeholder="请输入左眼裸视力" />
                  <el-tag size="small" style="margin-left: 20px;">正常值范围：5.0-5.2</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="右眼矫正视力">
                  <el-input v-model="examForm.rightEyeCorrectedVision" placeholder="请输入矫正视力" />
                  <el-tag size="small" style="margin-left: 20px;">正常值范围：-0</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="左眼矫正视力" label-visible="false">
                  <input class="myinput" type="text" v-model="examForm.leftEyeCorrectedVision" placeholder="请输入矫正视力" />
                  <el-tag size="small" style="margin-left: 20px;">正常值范围：-0</el-tag>
                </el-descriptions-item>
              </el-descriptions>
              <!-- 科室小结 -->
              <div style="margin-top: 20px;">
                <font>科室小结</font>
                <el-descriptions class="margin-top" :column="1" size="default" border style="margin-top: 20px;">
                  <el-descriptions-item label="科室小结">
                    <el-input v-model="examForm.visionDepartmentSummary" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" placeholder="科室小结：双眼屈光不正" />
                  </el-descriptions-item>
                </el-descriptions>
              </div>
              <!-- 责任医生 -->
              <div style="margin-top: 20px;">
                <font>责任医生</font>
                <el-descriptions class="margin-top" :column="3" size="default" border style="margin-top: 20px;">
                  <el-descriptions-item label="录入医师">
                    <input class="myinput" type="text" v-model="examForm.visionInputDoctor" placeholder="请输入录入医师姓名" />
                  </el-descriptions-item>
                  <el-descriptions-item label="责任医师">
                    <input class="myinput" type="text" v-model="examForm.visionResponsibleDoctor" placeholder="请输入责任医师姓名" />
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <el-button type="primary" @click="onSubmitVisionExam">视力+辨色力数据保存</el-button>
                  </el-descriptions-item>
                </el-descriptions>
              </div>
            </div>
          </el-collapse-item>

          <el-collapse-item title="血常规24项" name="3">
            <div>血常规24项具体录入页面</div>
          </el-collapse-item>
          <el-collapse-item title="肝功四项" name="4">
            <div>肝功四项录入页面</div>
          </el-collapse-item>
          <el-collapse-item title="肾功能三项" name="5">
            <div>肾功能三项录入页面</div>
          </el-collapse-item>
          <el-collapse-item title="血脂四项" name="6">
            <div>血脂四项录入页面</div>
          </el-collapse-item>
          <el-collapse-item title="尿常规24项" name="7">
            <div>尿常规24项录入页面</div>
          </el-collapse-item>
          <el-collapse-item title="颈动脉彩超" name="8">
            <div>颈动脉彩超录入页面</div>
          </el-collapse-item>
          <el-collapse-item title="头部CT" name="9">
            <div>头部CT录入页面</div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
  </div>
  <script>
    const { createApp, ref, reactive } = Vue;
    const app = createApp({
      setup() {
        const searchForm = reactive({ id: '' });
        const customerInfo = reactive({
          orderId: '202310253212565',
          phone: '213100000000',
          name: '张一山',
          gender: '女',
          packageType: '23东软家属已婚女士套餐D',
          examDate: '2023-10-12'
        });
        const examForm = reactive({
          height: '', weight: '', pulse: '', systolicPressure: '', diastolicPressure: '', departmentSummary: '', inputDoctor: '', responsibleDoctor: '', colorVision: '', rightEyeNakedVision: '', leftEyeNakedVision: '', rightEyeCorrectedVision: '', leftEyeCorrectedVision: '', visionDepartmentSummary: '', visionInputDoctor: '', visionResponsibleDoctor: ''
        });
        const colorVisionOptions = [
          { value: '正常', label: 'OK' },
          { value: '红绿色盲', label: 'honglv' },
          { value: '色弱', label: 'seruo' }
        ];
        const activeNames = ref(['1']);
        const handleSearch = () => { console.log('执行查询逻辑', searchForm); };
        const handleChange = (val) => { console.log('折叠面板状态改变', val); };
        const onSubmitBasicExam = () => { console.log('提交一般检查基础项数据', examForm); };
        const onSubmitVisionExam = () => { console.log('提交视力+辨色力数据', examForm); };
        return { searchForm, customerInfo, examForm, colorVisionOptions, activeNames, handleSearch, handleChange, onSubmitBasicExam, onSubmitVisionExam };
      }
    });
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
      app.component(key, component);
    }
    app.use(ElementPlus);
    app.mount('#app');
  </script>
</body>
</html> 